<!DOCTYPE html>
<html lang="zh-CN" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科技测试平台 - 智能管理系统</title>
    
    <!-- 字体引入 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS配置 -->
    <script>
        tailwind = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        'sans': ['Inter', 'system-ui', 'sans-serif'],
                        'mono': ['JetBrains Mono', 'monospace']
                    },
                    colors: {
                        'cyber-blue': '#16C6FF',
                        'cyber-purple': '#7B61FF',
                        'neon-cyan': '#00F0FF',
                        'dark-bg': '#121826',
                        'dark-card': '#1E293B',
                        'dark-border': '#334155',
                        'success-green': '#00E396',
                        'warning-orange': '#FFAB00',
                        'danger-red': '#FF4D4F'
                    },
                    animation: {
                        'pulse-glow': 'pulse-glow 2s ease-in-out infinite alternate',
                        'float': 'float 3s ease-in-out infinite',
                        'scan': 'scan 2s linear infinite',
                        'matrix': 'matrix 20s linear infinite',
                        'glitch': 'glitch 0.5s ease-in-out infinite alternate'
                    },
                    keyframes: {
                        'pulse-glow': {
                            'from': { 'box-shadow': '0 0 5px #16C6FF, 0 0 10px #16C6FF, 0 0 15px #16C6FF' },
                            'to': { 'box-shadow': '0 0 10px #16C6FF, 0 0 20px #16C6FF, 0 0 30px #16C6FF' }
                        },
                        'float': {
                            '0%, 100%': { transform: 'translateY(0px)' },
                            '50%': { transform: 'translateY(-10px)' }
                        },
                        'scan': {
                            '0%': { transform: 'translateX(-100%)' },
                            '100%': { transform: 'translateX(100%)' }
                        },
                        'matrix': {
                            '0%': { transform: 'translateY(-100%)' },
                            '100%': { transform: 'translateY(100vh)' }
                        },
                        'glitch': {
                            '0%': { transform: 'translate(0)' },
                            '20%': { transform: 'translate(-2px, 2px)' },
                            '40%': { transform: 'translate(-2px, -2px)' },
                            '60%': { transform: 'translate(2px, 2px)' },
                            '80%': { transform: 'translate(2px, -2px)' },
                            '100%': { transform: 'translate(0)' }
                        }
                    },
                    backdropBlur: {
                        'xs': '2px'
                    }
                }
            }
        }
    </script>
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- 自定义样式 -->
    <style>
        /* 全局变量 */
        :root {
            --primary-gradient: linear-gradient(135deg, #16C6FF 0%, #7B61FF 100%);
            --neon-glow: 0 0 5px #00F0FF, 0 0 10px #00F0FF, 0 0 15px #00F0FF, 0 0 20px #00F0FF;
            --card-glass: rgba(255, 255, 255, 0.1);
            --dark-glass: rgba(0, 0, 0, 0.3);
        }

        /* 科技感网格背景 */
        .tech-grid {
            background-image: 
                linear-gradient(rgba(22, 198, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(22, 198, 255, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        /* 霓虹光效 */
        .neon-border {
            border: 1px solid rgba(22, 198, 255, 0.3);
            box-shadow: 
                inset 0 0 10px rgba(22, 198, 255, 0.1),
                0 0 10px rgba(22, 198, 255, 0.1);
        }

        .neon-glow {
            box-shadow: var(--neon-glow);
        }

        /* 玻璃态效果 */
        .glass-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .dark .glass-card {
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* 数据流动动画 */
        .data-stream::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, #00F0FF, transparent);
            animation: scan 2s linear infinite;
        }

        /* 按钮特效 */
        .cyber-button {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #16C6FF, #7B61FF);
            transition: all 0.3s ease;
        }

        .cyber-button::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, transparent, rgba(255,255,255,0.2), transparent);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .cyber-button:hover::before {
            transform: translateX(100%);
        }

        .cyber-button:hover {
            box-shadow: 0 0 20px rgba(22, 198, 255, 0.6);
            transform: translateY(-2px);
        }

        /* 表格行悬浮效果 */
        .table-row:hover {
            background: rgba(22, 198, 255, 0.05);
            border-left: 3px solid #16C6FF;
            transform: translateX(3px);
            transition: all 0.3s ease;
        }

        /* 脉冲数据指示器 */
        .pulse-data {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #16C6FF, #7B61FF);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #00F0FF, #16C6FF);
        }

        /* 加载动画 */
        .loading-dots::after {
            content: '';
            display: inline-block;
            animation: loading-dots 1.5s infinite;
        }

        @keyframes loading-dots {
            0%, 20% { content: ''; }
            40% { content: '.'; }
            60% { content: '..'; }
            80%, 100% { content: '...'; }
        }

        /* 侧栏激活状态 */
        .nav-active {
            background: linear-gradient(135deg, rgba(22, 198, 255, 0.1), rgba(123, 97, 255, 0.1));
            border-right: 3px solid #16C6FF;
            box-shadow: inset 0 0 10px rgba(22, 198, 255, 0.1);
        }

        /* 数字跳动动画 */
        .counter {
            font-feature-settings: 'tnum';
            transition: all 0.3s ease;
        }

        /* 状态指示灯 */
        .status-dot {
            position: relative;
        }

        .status-dot::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
        }

        .status-online::before {
            background: #00E396;
        }

        .status-warning::before {
            background: #FFAB00;
        }

        .status-error::before {
            background: #FF4D4F;
        }
    </style>
</head>

<body class="min-h-screen bg-slate-50 dark:bg-dark-bg text-slate-900 dark:text-white transition-all duration-300 tech-grid">
    <!-- 顶部导航栏 -->
    <header class="fixed top-0 left-0 right-0 z-50 glass-card border-b border-white/10">
        <div class="flex items-center justify-between px-6 py-4">
            <!-- Logo & 品牌 -->
            <div class="flex items-center space-x-4">
                <button id="sidebarToggle" class="lg:hidden p-2 rounded-lg hover:bg-white/10 transition-colors">
                    <i class="fas fa-bars text-xl"></i>
                </button>
                
                <div class="flex items-center space-x-3">
                    <div class="relative">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyber-blue to-cyber-purple flex items-center justify-center">
                            <i class="fas fa-microchip text-white text-lg"></i>
                        </div>
                        <div class="absolute inset-0 rounded-xl bg-gradient-to-br from-cyber-blue to-cyber-purple opacity-50 blur-md"></div>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold bg-gradient-to-r from-cyber-blue to-cyber-purple bg-clip-text text-transparent">
                            科技测试平台
                        </h1>
                        <p class="text-xs text-slate-400">Intelligent Test Management System</p>
                    </div>
                </div>
            </div>

            <!-- 搜索栏 -->
            <div class="hidden md:block flex-1 max-w-md mx-8">
                <div class="relative">
                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
                    <input 
                        type="text" 
                        placeholder="搜索任务、设备、用例..." 
                        class="w-full pl-10 pr-4 py-2.5 bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl focus:border-cyber-blue focus:ring-2 focus:ring-cyber-blue/20 outline-none transition-all"
                    >
                    <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-cyber-blue/10 to-cyber-purple/10 opacity-0 hover:opacity-100 transition-opacity pointer-events-none"></div>
                </div>
            </div>

            <!-- 右侧操作区 -->
            <div class="flex items-center space-x-3">
                <!-- 主题切换 -->
                <button id="themeToggle" class="p-2.5 rounded-xl hover:bg-white/10 transition-colors group">
                    <i class="fas fa-moon dark:hidden text-lg group-hover:text-cyber-blue"></i>
                    <i class="fas fa-sun hidden dark:block text-lg group-hover:text-cyber-blue"></i>
                </button>

                <!-- 通知 -->
                <button class="relative p-2.5 rounded-xl hover:bg-white/10 transition-colors">
                    <i class="fas fa-bell text-lg"></i>
                    <div class="absolute -top-1 -right-1 w-5 h-5 bg-gradient-to-r from-danger-red to-pink-500 rounded-full flex items-center justify-center">
                        <span class="text-xs text-white font-medium">3</span>
                    </div>
                    <div class="absolute -top-1 -right-1 w-5 h-5 bg-danger-red/30 rounded-full animate-ping"></div>
                </button>

                <!-- 全屏 -->
                <button id="fullscreenToggle" class="p-2.5 rounded-xl hover:bg-white/10 transition-colors">
                    <i class="fas fa-expand text-lg"></i>
                </button>

                <!-- 用户信息 -->
                <div class="flex items-center space-x-3 ml-4">
                    <div class="text-right hidden sm:block">
                        <div class="font-medium">Admin</div>
                        <div class="text-xs text-slate-400">超级管理员</div>
                    </div>
                    <div class="relative">
                        <img 
                            src="https://api.dicebear.com/7.x/avataaars/svg?seed=admin" 
                            alt="Avatar" 
                            class="w-10 h-10 rounded-xl ring-2 ring-cyber-blue/30"
                        >
                        <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-success-green rounded-full border-2 border-white dark:border-dark-bg status-dot status-online"></div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="flex pt-20">
        <!-- 侧边栏 -->
        <aside id="sidebar" class="fixed left-0 top-20 bottom-0 w-72 glass-card border-r border-white/10 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-40 overflow-y-auto">
            <div class="p-6">
                <!-- 快速统计 -->
                <div class="mb-8">
                    <div class="text-xs uppercase tracking-wider text-slate-400 mb-4 font-medium">系统概览</div>
                    <div class="grid grid-cols-2 gap-3">
                        <div class="glass-card rounded-xl p-3 neon-border">
                            <div class="text-2xl font-bold counter text-cyber-blue">128</div>
                            <div class="text-xs text-slate-400">总设备</div>
                        </div>
                        <div class="glass-card rounded-xl p-3 neon-border">
                            <div class="text-2xl font-bold counter text-success-green">97</div>
                            <div class="text-xs text-slate-400">在线设备</div>
                        </div>
                    </div>
                </div>

                <!-- 导航菜单 -->
                <nav class="space-y-2">
                    <div class="text-xs uppercase tracking-wider text-slate-400 mb-4 font-medium">主要功能</div>
                    
                    <!-- 仪表盘 -->
                    <a href="#" data-view="dashboard" class="nav-item nav-active flex items-center space-x-3 px-4 py-3 rounded-xl hover:bg-white/5 transition-all group">
                        <i class="fas fa-chart-line text-cyber-blue group-hover:text-neon-cyan transition-colors"></i>
                        <span class="font-medium">仪表盘</span>
                        <div class="ml-auto w-2 h-2 bg-cyber-blue rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    </a>

                    <!-- 任务管理 -->
                    <div class="space-y-1">
                        <button class="nav-toggle w-full flex items-center space-x-3 px-4 py-3 rounded-xl hover:bg-white/5 transition-all group" data-target="task-menu">
                            <i class="fas fa-tasks text-cyber-blue group-hover:text-neon-cyan transition-colors"></i>
                            <span class="font-medium flex-1 text-left">任务管理</span>
                            <i class="fas fa-chevron-down text-xs transition-transform group-hover:rotate-180"></i>
                        </button>
                        <div id="task-menu" class="ml-6 space-y-1 hidden">
                            <a href="#" data-view="tasks" class="nav-item flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-white/5 transition-all text-sm">
                                <i class="fas fa-list text-slate-400"></i>
                                <span>任务列表</span>
                            </a>
                            <a href="#" data-view="create-task" class="nav-item flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-white/5 transition-all text-sm">
                                <i class="fas fa-plus text-slate-400"></i>
                                <span>创建任务</span>
                            </a>
                            <a href="#" data-view="task-details" class="nav-item flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-white/5 transition-all text-sm">
                                <i class="fas fa-info-circle text-slate-400"></i>
                                <span>任务详情</span>
                            </a>
                        </div>
                    </div>

                    <!-- 设备管理 -->
                    <div class="space-y-1">
                        <button class="nav-toggle w-full flex items-center space-x-3 px-4 py-3 rounded-xl hover:bg-white/5 transition-all group" data-target="device-menu">
                            <i class="fas fa-mobile-alt text-cyber-blue group-hover:text-neon-cyan transition-colors"></i>
                            <span class="font-medium flex-1 text-left">设备管理</span>
                            <i class="fas fa-chevron-down text-xs transition-transform group-hover:rotate-180"></i>
                        </button>
                        <div id="device-menu" class="ml-6 space-y-1 hidden">
                            <a href="#" data-view="devices" class="nav-item flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-white/5 transition-all text-sm">
                                <i class="fas fa-server text-slate-400"></i>
                                <span>设备列表</span>
                            </a>
                            <a href="#" data-view="device-test" class="nav-item flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-white/5 transition-all text-sm">
                                <i class="fas fa-flask text-slate-400"></i>
                                <span>设备测试</span>
                            </a>
                            <a href="#" data-view="create-device" class="nav-item flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-white/5 transition-all text-sm">
                                <i class="fas fa-plus text-slate-400"></i>
                                <span>创建设备</span>
                            </a>
                        </div>
                    </div>

                    <!-- 测试用例 -->
                    <div class="space-y-1">
                        <button class="nav-toggle w-full flex items-center space-x-3 px-4 py-3 rounded-xl hover:bg-white/5 transition-all group" data-target="case-menu">
                            <i class="fas fa-code text-cyber-blue group-hover:text-neon-cyan transition-colors"></i>
                            <span class="font-medium flex-1 text-left">测试用例</span>
                            <i class="fas fa-chevron-down text-xs transition-transform group-hover:rotate-180"></i>
                        </button>
                        <div id="case-menu" class="ml-6 space-y-1 hidden">
                            <a href="#" data-view="cases" class="nav-item flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-white/5 transition-all text-sm">
                                <i class="fas fa-file-code text-slate-400"></i>
                                <span>用例列表</span>
                            </a>
                            <a href="#" data-view="create-case" class="nav-item flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-white/5 transition-all text-sm">
                                <i class="fas fa-edit text-slate-400"></i>
                                <span>创建/更新用例</span>
                            </a>
                            <a href="#" data-view="bind-case" class="nav-item flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-white/5 transition-all text-sm">
                                <i class="fas fa-link text-slate-400"></i>
                                <span>绑定测试用例</span>
                            </a>
                        </div>
                    </div>

                    <!-- 执行结果 -->
                    <a href="#" data-view="results" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl hover:bg-white/5 transition-all group">
                        <i class="fas fa-chart-bar text-cyber-blue group-hover:text-neon-cyan transition-colors"></i>
                        <span class="font-medium">执行结果</span>
                        <div class="ml-auto w-2 h-2 bg-cyber-blue rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    </a>
                </nav>

                <!-- 底部信息 -->
                <div class="mt-8 pt-6 border-t border-white/10">
                    <div class="text-xs text-slate-400 space-y-1">
                        <div>系统版本：v2.1.0</div>
                        <div>运行时间：<span class="text-success-green">72天</span></div>
                        <div>API状态：<span class="text-success-green">●</span> 正常</div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区域 -->
        <main class="flex-1 lg:ml-72 p-6 space-y-6">
            <!-- 面包屑导航 -->
            <div class="flex items-center justify-between">
                <nav class="text-sm">
                    <ol class="flex items-center space-x-2 text-slate-400">
                        <li><a href="#" class="hover:text-cyber-blue transition-colors">首页</a></li>
                        <li><i class="fas fa-chevron-right text-xs"></i></li>
                        <li id="breadcrumb" class="text-white font-medium">仪表盘</li>
                    </ol>
                </nav>
                <div class="flex items-center space-x-2">
                    <button class="px-3 py-1.5 text-xs bg-white/5 rounded-lg hover:bg-white/10 transition-colors">
                        <i class="fas fa-sync-alt mr-1"></i>刷新
                    </button>
                    <button class="px-3 py-1.5 text-xs bg-gradient-to-r from-cyber-blue to-cyber-purple rounded-lg hover:shadow-lg transition-all">
                        <i class="fas fa-download mr-1"></i>导出
                    </button>
                </div>
            </div>

            <!-- 仪表盘视图 -->
            <div id="dashboard-view" class="view-content space-y-6">
                <!-- 统计卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
                    <!-- 设备总数 -->
                    <div class="glass-card rounded-2xl p-6 neon-border hover:shadow-lg transition-all group">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-400 mb-1">设备总数</p>
                                <p class="text-3xl font-bold counter bg-gradient-to-r from-cyber-blue to-cyan-400 bg-clip-text text-transparent">128</p>
                                <p class="text-xs text-success-green mt-2">
                                    <i class="fas fa-arrow-up mr-1"></i>较上周 +6%
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-gradient-to-br from-cyber-blue to-blue-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i class="fas fa-server text-white text-lg"></i>
                            </div>
                        </div>
                        <div class="relative mt-4 h-1 bg-slate-700 rounded-full overflow-hidden">
                            <div class="absolute left-0 top-0 h-full w-3/4 bg-gradient-to-r from-cyber-blue to-cyan-400 rounded-full data-stream"></div>
                        </div>
                    </div>

                    <!-- 在线设备 -->
                    <div class="glass-card rounded-2xl p-6 neon-border hover:shadow-lg transition-all group">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-400 mb-1">在线设备</p>
                                <p class="text-3xl font-bold counter bg-gradient-to-r from-success-green to-emerald-400 bg-clip-text text-transparent">97</p>
                                <p class="text-xs text-success-green mt-2">
                                    <i class="fas fa-check-circle mr-1"></i>运行正常
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-gradient-to-br from-success-green to-green-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i class="fas fa-wifi text-white text-lg"></i>
                            </div>
                        </div>
                        <div class="relative mt-4 h-1 bg-slate-700 rounded-full overflow-hidden">
                            <div class="absolute left-0 top-0 h-full w-5/6 bg-gradient-to-r from-success-green to-emerald-400 rounded-full data-stream"></div>
                        </div>
                    </div>

                    <!-- 待执行任务 -->
                    <div class="glass-card rounded-2xl p-6 neon-border hover:shadow-lg transition-all group">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-400 mb-1">待执行任务</p>
                                <p class="text-3xl font-bold counter bg-gradient-to-r from-warning-orange to-yellow-400 bg-clip-text text-transparent">23</p>
                                <p class="text-xs text-warning-orange mt-2">
                                    <i class="fas fa-clock mr-1"></i>平均等待 3分钟
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-gradient-to-br from-warning-orange to-orange-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i class="fas fa-hourglass-half text-white text-lg pulse-data"></i>
                            </div>
                        </div>
                        <div class="relative mt-4 h-1 bg-slate-700 rounded-full overflow-hidden">
                            <div class="absolute left-0 top-0 h-full w-1/3 bg-gradient-to-r from-warning-orange to-yellow-400 rounded-full data-stream"></div>
                        </div>
                    </div>

                    <!-- 成功率 -->
                    <div class="glass-card rounded-2xl p-6 neon-border hover:shadow-lg transition-all group">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-400 mb-1">成功率</p>
                                <p class="text-3xl font-bold counter bg-gradient-to-r from-cyber-purple to-purple-400 bg-clip-text text-transparent">86%</p>
                                <p class="text-xs text-danger-red mt-2">
                                    <i class="fas fa-arrow-down mr-1"></i>较昨日 -1%
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-gradient-to-br from-cyber-purple to-purple-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i class="fas fa-chart-pie text-white text-lg"></i>
                            </div>
                        </div>
                        <div class="relative mt-4 h-1 bg-slate-700 rounded-full overflow-hidden">
                            <div class="absolute left-0 top-0 h-full w-5/6 bg-gradient-to-r from-cyber-purple to-purple-400 rounded-full data-stream"></div>
                        </div>
                    </div>
                </div>

                <!-- 图表和快速操作 -->
                <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
                    <!-- 趋势图表 -->
                    <div class="xl:col-span-2 glass-card rounded-2xl p-6 neon-border">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="text-lg font-semibold">执行趋势分析</h3>
                            <div class="flex items-center space-x-2">
                                <select class="bg-white/5 border border-white/10 rounded-lg px-3 py-1 text-sm">
                                    <option>近7天</option>
                                    <option>近30天</option>
                                    <option>近90天</option>
                                </select>
                            </div>
                        </div>
                        <div class="h-80 bg-gradient-to-br from-slate-800/50 to-slate-900/50 rounded-xl flex items-center justify-center border border-white/10">
                            <div class="text-center">
                                <i class="fas fa-chart-area text-6xl text-cyber-blue/30 mb-4"></i>
                                <p class="text-slate-400">图表组件占位</p>
                                <p class="text-xs text-slate-500 mt-1">接入 ECharts 或其他图表库</p>
                            </div>
                        </div>
                    </div>

                    <!-- 快速操作 -->
                    <div class="space-y-6">
                        <!-- 快速操作按钮 -->
                        <div class="glass-card rounded-2xl p-6 neon-border">
                            <h3 class="text-lg font-semibold mb-4">快速操作</h3>
                            <div class="grid grid-cols-2 gap-3">
                                <button class="cyber-button p-4 rounded-xl text-white font-medium flex flex-col items-center space-y-2 hover:scale-105 transition-transform">
                                    <i class="fas fa-plus text-xl"></i>
                                    <span class="text-xs">创建任务</span>
                                </button>
                                <button class="p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-colors font-medium flex flex-col items-center space-y-2 hover:scale-105">
                                    <i class="fas fa-mobile-alt text-xl text-success-green"></i>
                                    <span class="text-xs">注册设备</span>
                                </button>
                                <button class="p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-colors font-medium flex flex-col items-center space-y-2 hover:scale-105">
                                    <i class="fas fa-upload text-xl text-warning-orange"></i>
                                    <span class="text-xs">导入用例</span>
                                </button>
                                <button class="p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-colors font-medium flex flex-col items-center space-y-2 hover:scale-105">
                                    <i class="fas fa-play text-xl text-cyber-purple"></i>
                                    <span class="text-xs">执行任务</span>
                                </button>
                            </div>
                        </div>

                        <!-- 实时状态 -->
                        <div class="glass-card rounded-2xl p-6 neon-border">
                            <h3 class="text-lg font-semibold mb-4">实时状态</h3>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-slate-400">CPU 使用率</span>
                                    <span class="text-sm font-medium">68%</span>
                                </div>
                                <div class="h-2 bg-slate-700 rounded-full overflow-hidden">
                                    <div class="h-full w-2/3 bg-gradient-to-r from-cyber-blue to-cyan-400 rounded-full"></div>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-slate-400">内存使用率</span>
                                    <span class="text-sm font-medium">52%</span>
                                </div>
                                <div class="h-2 bg-slate-700 rounded-full overflow-hidden">
                                    <div class="h-full w-1/2 bg-gradient-to-r from-success-green to-emerald-400 rounded-full"></div>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-slate-400">网络延迟</span>
                                    <span class="text-sm font-medium text-success-green">23ms</span>
                                </div>
                                <div class="h-2 bg-slate-700 rounded-full overflow-hidden">
                                    <div class="h-full w-1/4 bg-gradient-to-r from-success-green to-emerald-400 rounded-full"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 最近活动 -->
                <div class="glass-card rounded-2xl p-6 neon-border">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold">最近活动</h3>
                        <button class="text-sm text-cyber-blue hover:text-neon-cyan transition-colors">查看全部</button>
                    </div>
                    <div class="space-y-4">
                        <div class="flex items-center space-x-4 p-3 rounded-lg hover:bg-white/5 transition-colors">
                            <div class="w-10 h-10 bg-gradient-to-br from-success-green to-green-600 rounded-lg flex items-center justify-center">
                                <i class="fas fa-check text-white"></i>
                            </div>
                            <div class="flex-1">
                                <p class="font-medium">登录回归测试-2024W42 执行完成</p>
                                <p class="text-sm text-slate-400">24台Android设备，通过率86%</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm text-slate-400">2分钟前</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center space-x-4 p-3 rounded-lg hover:bg-white/5 transition-colors">
                            <div class="w-10 h-10 bg-gradient-to-br from-cyber-blue to-blue-600 rounded-lg flex items-center justify-center">
                                <i class="fas fa-plus text-white"></i>
                            </div>
                            <div class="flex-1">
                                <p class="font-medium">新设备 iPhone15Pro 已注册</p>
                                <p class="text-sm text-slate-400">iOS 17.1 · 256GB</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm text-slate-400">5分钟前</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center space-x-4 p-3 rounded-lg hover:bg-white/5 transition-colors">
                            <div class="w-10 h-10 bg-gradient-to-br from-warning-orange to-orange-600 rounded-lg flex items-center justify-center">
                                <i class="fas fa-exclamation text-white"></i>
                            </div>
                            <div class="flex-1">
                                <p class="font-medium">支付核心接口测试异常</p>
                                <p class="text-sm text-slate-400">连接超时，需要检查网络配置</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm text-slate-400">10分钟前</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 任务列表视图 -->
            <div id="tasks-view" class="view-content hidden space-y-6">
                <div class="flex items-center justify-between">
                    <h2 class="text-2xl font-bold bg-gradient-to-r from-cyber-blue to-cyber-purple bg-clip-text text-transparent">任务管理</h2>
                    <div class="flex items-center space-x-3">
                        <button class="px-4 py-2 bg-white/5 hover:bg-white/10 rounded-lg transition-colors">
                            <i class="fas fa-filter mr-2"></i>筛选
                        </button>
                        <button class="cyber-button px-4 py-2 rounded-lg text-white font-medium hover:scale-105 transition-transform">
                            <i class="fas fa-plus mr-2"></i>新建任务
                        </button>
                    </div>
                </div>

                <!-- 任务统计 -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div class="glass-card rounded-xl p-4 neon-border">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-cyber-blue">56</div>
                            <div class="text-sm text-slate-400">总任务</div>
                        </div>
                    </div>
                    <div class="glass-card rounded-xl p-4 neon-border">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-success-green">42</div>
                            <div class="text-sm text-slate-400">已完成</div>
                        </div>
                    </div>
                    <div class="glass-card rounded-xl p-4 neon-border">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-warning-orange">8</div>
                            <div class="text-sm text-slate-400">执行中</div>
                        </div>
                    </div>
                    <div class="glass-card rounded-xl p-4 neon-border">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-danger-red">6</div>
                            <div class="text-sm text-slate-400">失败</div>
                        </div>
                    </div>
                </div>

                <!-- 任务表格 -->
                <div class="glass-card rounded-2xl neon-border overflow-hidden">
                    <div class="p-4 border-b border-white/10">
                        <div class="flex items-center space-x-4">
                            <div class="relative flex-1">
                                <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
                                <input type="text" placeholder="搜索任务名称..." class="w-full pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-lg focus:border-cyber-blue focus:ring-2 focus:ring-cyber-blue/20 outline-none">
                            </div>
                            <select class="bg-white/5 border border-white/10 rounded-lg px-3 py-2">
                                <option>全部状态</option>
                                <option>执行中</option>
                                <option>已完成</option>
                                <option>失败</option>
                            </select>
                        </div>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead class="bg-white/5">
                                <tr>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">任务名称</th>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">创建人</th>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">设备数量</th>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">进度</th>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">状态</th>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-white/5">
                                <tr class="table-row hover:bg-white/5 transition-all">
                                    <td class="px-6 py-4">
                                        <div class="font-medium">登录回归测试-2024W42</div>
                                        <div class="text-sm text-slate-400">测试登录相关功能</div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center space-x-2">
                                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=mariana" alt="Avatar" class="w-6 h-6 rounded-full">
                                            <span>Mariana</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="text-cyber-blue font-medium">24</span>
                                        <span class="text-slate-400 text-sm ml-1">台</span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center space-x-2">
                                            <div class="flex-1 h-2 bg-slate-700 rounded-full overflow-hidden">
                                                <div class="h-full w-3/4 bg-gradient-to-r from-cyber-blue to-cyan-400 rounded-full"></div>
                                            </div>
                                            <span class="text-sm font-medium">75%</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-warning-orange/10 text-warning-orange border border-warning-orange/20">
                                            <i class="fas fa-clock mr-1"></i>执行中
                                        </span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center space-x-2">
                                            <button class="p-2 hover:bg-white/10 rounded-lg transition-colors" title="查看详情">
                                                <i class="fas fa-eye text-slate-400 hover:text-cyber-blue"></i>
                                            </button>
                                            <button class="p-2 hover:bg-white/10 rounded-lg transition-colors" title="编辑">
                                                <i class="fas fa-edit text-slate-400 hover:text-cyber-blue"></i>
                                            </button>
                                            <button class="p-2 hover:bg-white/10 rounded-lg transition-colors" title="删除">
                                                <i class="fas fa-trash text-slate-400 hover:text-danger-red"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                
                                <tr class="table-row hover:bg-white/5 transition-all">
                                    <td class="px-6 py-4">
                                        <div class="font-medium">支付核心冒烟测试</div>
                                        <div class="text-sm text-slate-400">核心支付流程验证</div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center space-x-2">
                                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=stone" alt="Avatar" class="w-6 h-6 rounded-full">
                                            <span>Stone</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="text-cyber-blue font-medium">12</span>
                                        <span class="text-slate-400 text-sm ml-1">台</span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center space-x-2">
                                            <div class="flex-1 h-2 bg-slate-700 rounded-full overflow-hidden">
                                                <div class="h-full w-full bg-gradient-to-r from-success-green to-emerald-400 rounded-full"></div>
                                            </div>
                                            <span class="text-sm font-medium">100%</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success-green/10 text-success-green border border-success-green/20">
                                            <i class="fas fa-check mr-1"></i>已完成
                                        </span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center space-x-2">
                                            <button class="p-2 hover:bg-white/10 rounded-lg transition-colors" title="查看详情">
                                                <i class="fas fa-eye text-slate-400 hover:text-cyber-blue"></i>
                                            </button>
                                            <button class="p-2 hover:bg-white/10 rounded-lg transition-colors" title="编辑">
                                                <i class="fas fa-edit text-slate-400 hover:text-cyber-blue"></i>
                                            </button>
                                            <button class="p-2 hover:bg-white/10 rounded-lg transition-colors" title="删除">
                                                <i class="fas fa-trash text-slate-400 hover:text-danger-red"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>

                                <tr class="table-row hover:bg-white/5 transition-all">
                                    <td class="px-6 py-4">
                                        <div class="font-medium">接口回归测试-夜间</div>
                                        <div class="text-sm text-slate-400">API接口稳定性测试</div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center space-x-2">
                                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=echo" alt="Avatar" class="w-6 h-6 rounded-full">
                                            <span>Echo</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="text-cyber-blue font-medium">36</span>
                                        <span class="text-slate-400 text-sm ml-1">台</span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center space-x-2">
                                            <div class="flex-1 h-2 bg-slate-700 rounded-full overflow-hidden">
                                                <div class="h-full w-1/4 bg-gradient-to-r from-danger-red to-red-400 rounded-full"></div>
                                            </div>
                                            <span class="text-sm font-medium">25%</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-danger-red/10 text-danger-red border border-danger-red/20">
                                            <i class="fas fa-times mr-1"></i>失败
                                        </span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center space-x-2">
                                            <button class="p-2 hover:bg-white/10 rounded-lg transition-colors" title="查看详情">
                                                <i class="fas fa-eye text-slate-400 hover:text-cyber-blue"></i>
                                            </button>
                                            <button class="p-2 hover:bg-white/10 rounded-lg transition-colors" title="重新执行">
                                                <i class="fas fa-redo text-slate-400 hover:text-success-green"></i>
                                            </button>
                                            <button class="p-2 hover:bg-white/10 rounded-lg transition-colors" title="删除">
                                                <i class="fas fa-trash text-slate-400 hover:text-danger-red"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="px-6 py-4 border-t border-white/10 flex items-center justify-between">
                        <div class="text-sm text-slate-400">
                            显示 1-10 条，共 56 条记录
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 transition-colors">上一页</button>
                            <button class="px-3 py-1 rounded-lg bg-cyber-blue text-white">1</button>
                            <button class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 transition-colors">2</button>
                            <button class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 transition-colors">3</button>
                            <button class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 transition-colors">下一页</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他视图内容占位 -->
            <div id="create-task-view" class="view-content hidden space-y-6">
                <h2 class="text-2xl font-bold bg-gradient-to-r from-cyber-blue to-cyber-purple bg-clip-text text-transparent">创建任务</h2>
                <div class="glass-card rounded-2xl p-6 neon-border">
                    <p class="text-center text-slate-400">创建任务表单内容区域</p>
                </div>
            </div>

            <div id="devices-view" class="view-content hidden space-y-6">
                <h2 class="text-2xl font-bold bg-gradient-to-r from-cyber-blue to-cyber-purple bg-clip-text text-transparent">设备管理</h2>
                <div class="glass-card rounded-2xl p-6 neon-border">
                    <p class="text-center text-slate-400">设备管理内容区域</p>
                </div>
            </div>

            <div id="cases-view" class="view-content hidden space-y-6">
                <h2 class="text-2xl font-bold bg-gradient-to-r from-cyber-blue to-cyber-purple bg-clip-text text-transparent">测试用例</h2>
                <div class="glass-card rounded-2xl p-6 neon-border">
                    <p class="text-center text-slate-400">测试用例内容区域</p>
                </div>
            </div>

            <div id="results-view" class="view-content hidden space-y-6">
                <h2 class="text-2xl font-bold bg-gradient-to-r from-cyber-blue to-cyber-purple bg-clip-text text-transparent">执行结果</h2>
                <div class="glass-card rounded-2xl p-6 neon-border">
                    <p class="text-center text-slate-400">执行结果内容区域</p>
                </div>
            </div>
        </main>
    </div>

    <!-- 侧栏遮罩 (移动端) -->
    <div id="sidebarOverlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-30 lg:hidden opacity-0 pointer-events-none transition-all duration-300"></div>

    <!-- JavaScript -->
    <script>
        // 全局状态管理
        const AppState = {
            currentView: 'dashboard',
            sidebarOpen: false,
            theme: localStorage.getItem('theme') || 'dark'
        };

        // DOM 元素
        const elements = {
            sidebar: document.getElementById('sidebar'),
            sidebarToggle: document.getElementById('sidebarToggle'),
            sidebarOverlay: document.getElementById('sidebarOverlay'),
            themeToggle: document.getElementById('themeToggle'),
            fullscreenToggle: document.getElementById('fullscreenToggle'),
            breadcrumb: document.getElementById('breadcrumb'),
            navItems: document.querySelectorAll('.nav-item'),
            navToggles: document.querySelectorAll('.nav-toggle'),
            viewContents: document.querySelectorAll('.view-content')
        };

        // 初始化应用
        function initApp() {
            initTheme();
            initEventListeners();
            initCounters();
            showView('dashboard');
        }

        // 主题初始化和切换
        function initTheme() {
            if (AppState.theme === 'dark') {
                document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.remove('dark');
            }
        }

        function toggleTheme() {
            AppState.theme = AppState.theme === 'dark' ? 'light' : 'dark';
            localStorage.setItem('theme', AppState.theme);
            initTheme();
        }

        // 侧栏控制
        function toggleSidebar() {
            AppState.sidebarOpen = !AppState.sidebarOpen;
            
            if (AppState.sidebarOpen) {
                elements.sidebar.classList.remove('-translate-x-full');
                elements.sidebarOverlay.classList.remove('opacity-0', 'pointer-events-none');
            } else {
                elements.sidebar.classList.add('-translate-x-full');
                elements.sidebarOverlay.classList.add('opacity-0', 'pointer-events-none');
            }
        }

        function closeSidebar() {
            if (AppState.sidebarOpen) {
                AppState.sidebarOpen = false;
                elements.sidebar.classList.add('-translate-x-full');
                elements.sidebarOverlay.classList.add('opacity-0', 'pointer-events-none');
            }
        }

        // 视图切换
        function showView(viewName) {
            AppState.currentView = viewName;
            
            // 隐藏所有视图
            elements.viewContents.forEach(view => {
                view.classList.add('hidden');
            });
            
            // 显示目标视图
            const targetView = document.getElementById(`${viewName}-view`);
            if (targetView) {
                targetView.classList.remove('hidden');
            }
            
            // 更新面包屑
            updateBreadcrumb(viewName);
            
            // 更新导航激活状态
            updateNavigation(viewName);
            
            // 在移动端关闭侧栏
            if (window.innerWidth < 1024) {
                closeSidebar();
            }
        }

        // 更新面包屑
        function updateBreadcrumb(viewName) {
            const breadcrumbTexts = {
                dashboard: '仪表盘',
                tasks: '任务列表',
                'create-task': '创建任务',
                'task-details': '任务详情',
                devices: '设备列表',
                'device-test': '设备测试',
                'create-device': '创建设备',
                cases: '用例列表',
                'create-case': '创建/更新用例',
                'bind-case': '绑定测试用例',
                results: '执行结果'
            };
            
            elements.breadcrumb.textContent = breadcrumbTexts[viewName] || viewName;
        }

        // 更新导航激活状态
        function updateNavigation(viewName) {
            elements.navItems.forEach(item => {
                const itemView = item.getAttribute('data-view');
                if (itemView === viewName) {
                    item.classList.add('nav-active');
                } else {
                    item.classList.remove('nav-active');
                }
            });
        }

        // 全屏切换
        function toggleFullscreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
                elements.fullscreenToggle.innerHTML = '<i class="fas fa-compress text-lg"></i>';
            } else {
                document.exitFullscreen();
                elements.fullscreenToggle.innerHTML = '<i class="fas fa-expand text-lg"></i>';
            }
        }

        // 数字计数动画
        function animateCounter(element, start, end, duration = 1000) {
            const range = end - start;
            const increment = range / (duration / 16);
            let current = start;
            
            const timer = setInterval(() => {
                current += increment;
                if (current >= end) {
                    current = end;
                    clearInterval(timer);
                }
                element.textContent = Math.floor(current);
            }, 16);
        }

        // 初始化计数器动画
        function initCounters() {
            const counters = document.querySelectorAll('.counter');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const counter = entry.target;
                        const endValue = parseInt(counter.textContent);
                        animateCounter(counter, 0, endValue);
                        observer.unobserve(counter);
                    }
                });
            });
            
            counters.forEach(counter => observer.observe(counter));
        }

        // 事件监听器初始化
        function initEventListeners() {
            // 侧栏切换
            elements.sidebarToggle?.addEventListener('click', toggleSidebar);
            elements.sidebarOverlay?.addEventListener('click', closeSidebar);
            
            // 主题切换
            elements.themeToggle?.addEventListener('click', toggleTheme);
            
            // 全屏切换
            elements.fullscreenToggle?.addEventListener('click', toggleFullscreen);
            
            // 导航项点击
            elements.navItems.forEach(item => {
                item.addEventListener('click', (e) => {
                    e.preventDefault();
                    const viewName = item.getAttribute('data-view');
                    if (viewName) {
                        showView(viewName);
                    }
                });
            });
            
            // 导航折叠切换
            elements.navToggles.forEach(toggle => {
                toggle.addEventListener('click', () => {
                    const targetId = toggle.getAttribute('data-target');
                    const target = document.getElementById(targetId);
                    const icon = toggle.querySelector('.fa-chevron-down');
                    
                    if (target && icon) {
                        target.classList.toggle('hidden');
                        icon.classList.toggle('rotate-180');
                    }
                });
            });
            
            // 窗口大小变化
            window.addEventListener('resize', () => {
                if (window.innerWidth >= 1024) {
                    closeSidebar();
                }
            });
            
            // ESC 键关闭侧栏
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && AppState.sidebarOpen) {
                    closeSidebar();
                }
            });
        }

        // 应用启动
        document.addEventListener('DOMContentLoaded', initApp);

        // 模拟实时数据更新
        function updateRealTimeData() {
            const cpuUsage = Math.floor(Math.random() * 30) + 50;
            const memoryUsage = Math.floor(Math.random() * 20) + 40;
            const networkDelay = Math.floor(Math.random() * 10) + 20;
            
            // 这里可以更新实时数据显示
            // 实际项目中应该通过 WebSocket 或定期 API 调用获取真实数据
        }

        // 每30秒更新一次实时数据
        setInterval(updateRealTimeData, 30000);
    </script>
</body>
</html>
